<template>
  <div class="urban-transport-page">
    <h2 class="content-title">城市交通解决方案</h2>
    
    <div class="solution-intro">
      <div class="solution-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/solution-urban.jpg" alt="城市交通解决方案">
      </div>
      <div class="solution-desc">
        <p>中空领航城市交通解决方案，基于城市交通数字孪生平台，结合大数据和人工智能技术，为城市交通管理者提供全方位的智慧交通解决方案，实现城市交通的智能化、精细化、协同化管理。</p>
        <p>我们致力于通过技术创新解决城市交通拥堵难题，提升交通运行效率，改善居民出行体验，降低能源消耗和环境污染，助力城市交通高质量发展。</p>
      </div>
    </div>

    <div class="solution-structure">
      <h3 class="section-title">解决方案架构</h3>
      <div class="structure-image">
        <img src="http://www.sutpc.com/resource/sutpc/images/urban-structure.png" alt="城市交通解决方案架构">
      </div>
    </div>

    <div class="solution-features">
      <h3 class="section-title">方案特点</h3>
      <div class="features-container">
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-holistic.svg" alt="全局感知">
          </div>
          <div class="feature-content">
            <h4>全局感知</h4>
            <p>通过多源数据融合，建立涵盖车流、人流、路网、设施等要素的城市交通全局感知体系，实现交通运行态势的实时监测。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-intelligent.svg" alt="智能调控">
          </div>
          <div class="feature-content">
            <h4>智能调控</h4>
            <p>基于人工智能算法，实现交通信号、诱导屏、公交调度等交通要素的智能调控，缓解交通拥堵，提升通行效率。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-coordination.svg" alt="协同管控">
          </div>
          <div class="feature-content">
            <h4>协同管控</h4>
            <p>打破信息孤岛，实现交警、交通、应急等部门数据共享与业务协同，构建统一高效的交通协同管控体系。</p>
          </div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <img src="http://www.sutpc.com/resource/sutpc/images/icon-service.svg" alt="精准服务">
          </div>
          <div class="feature-content">
            <h4>精准服务</h4>
            <p>为市民提供精准的出行信息服务，包括路况预测、最优路径规划、公交到站预测等，提升出行体验。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-subsystems">
      <h3 class="section-title">核心子系统</h3>
      <div class="subsystems-container">
        <div class="subsystem-item">
          <div class="subsystem-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/subsystem-signal.jpg" alt="信号控制系统">
          </div>
          <div class="subsystem-content">
            <h4>智能信号控制系统</h4>
            <p>基于AI算法的智能信号控制系统，能够根据实时交通流量自动优化信号配时，实现交叉口交通效率最大化。系统支持多路口协调控制、绿波带配置、公交优先等功能，有效提升道路通行效率。</p>
            <div class="subsystem-features">
              <span class="feature-tag">自适应控制</span>
              <span class="feature-tag">多路口协调</span>
              <span class="feature-tag">绿波控制</span>
              <span class="feature-tag">公交优先</span>
            </div>
          </div>
        </div>
        
        <div class="subsystem-item">
          <div class="subsystem-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/subsystem-command.jpg" alt="指挥调度系统">
          </div>
          <div class="subsystem-content">
            <h4>交通指挥调度系统</h4>
            <p>为交通管理部门提供的综合指挥调度平台，实现对全市交通运行状态的实时监测与指挥调度。系统集成视频监控、警情处理、勤务管理等功能，支持交通事件的快速发现、响应与处置。</p>
            <div class="subsystem-features">
              <span class="feature-tag">实时监测</span>
              <span class="feature-tag">智能预警</span>
              <span class="feature-tag">协同联动</span>
              <span class="feature-tag">资源调度</span>
            </div>
          </div>
        </div>
        
        <div class="subsystem-item">
          <div class="subsystem-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/subsystem-parking.jpg" alt="智慧停车系统">
          </div>
          <div class="subsystem-content">
            <h4>智慧停车管理系统</h4>
            <p>整合全市停车资源，提供停车位实时查询、导航、预约、支付等一站式停车服务。系统通过大数据分析，实现停车资源的合理分配与利用，缓解城市停车难问题。</p>
            <div class="subsystem-features">
              <span class="feature-tag">资源整合</span>
              <span class="feature-tag">智能引导</span>
              <span class="feature-tag">电子支付</span>
              <span class="feature-tag">数据分析</span>
            </div>
          </div>
        </div>
        
        <div class="subsystem-item">
          <div class="subsystem-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/subsystem-transit.jpg" alt="公交优先系统">
          </div>
          <div class="subsystem-content">
            <h4>公共交通优先系统</h4>
            <p>为公共交通提供的优先通行解决方案，包括信号优先、专用道管理、运力调度等功能。系统通过优化公交运营策略，提升公交服务水平，鼓励市民绿色出行。</p>
            <div class="subsystem-features">
              <span class="feature-tag">信号优先</span>
              <span class="feature-tag">智能调度</span>
              <span class="feature-tag">线网优化</span>
              <span class="feature-tag">服务评估</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="solution-cases">
      <h3 class="section-title">成功案例</h3>
      <div class="cases-container">
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-shenzhen.jpg" alt="深圳市智慧交通">
          </div>
          <div class="case-content">
            <h4>深圳市智慧交通系统</h4>
            <p>为深圳市交通运输局开发的智慧交通综合系统，通过大数据分析和AI算法优化，实现了全市范围内的交通信号协调控制、交通运行态势实时监测与分析。系统上线后，全市路网通行效率提升20%，高峰拥堵指数降低15%，公交准点率提高30%。</p>
            <a href="javascript:;" class="read-more">查看详情</a>
          </div>
        </div>
        
        <div class="case-item">
          <div class="case-image">
            <img src="http://www.sutpc.com/resource/sutpc/images/case-guangzhou.jpg" alt="广州市智慧公交系统">
          </div>
          <div class="case-content">
            <h4>广州市智慧公交系统</h4>
            <p>为广州市公交集团打造的智慧公交解决方案，包括公交信号优先、智能排班调度、客流分析预测等功能。系统实现了公交信号优先控制，高峰期公交运行速度提升15%，降低乘客平均等待时间25%，提高了公交系统的吸引力和竞争力。</p>
            <a href="javascript:;" class="read-more">查看详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UrbanTransportPage'
}
</script>

<style scoped>
.urban-transport-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.solution-intro {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}

.solution-image {
  flex: 0 0 50%;
}

.solution-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.solution-desc {
  flex: 0 0 50%;
}

.solution-desc p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  color: var(--text-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--secondary-color);
}

.solution-structure {
  margin-bottom: 60px;
}

.structure-image {
  width: 100%;
  text-align: center;
}

.structure-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.features-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.feature-item {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: #f8f8f8;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  flex: 0 0 60px;
}

.feature-icon img {
  width: 60px;
  height: 60px;
}

.feature-content {
  flex: 1;
}

.feature-content h4 {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.feature-content p {
  color: #666;
  line-height: 1.6;
}

.subsystems-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}

.subsystem-item {
  display: flex;
  gap: 30px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.subsystem-image {
  flex: 0 0 30%;
}

.subsystem-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subsystem-content {
  flex: 1;
  padding: 25px 25px 25px 0;
}

.subsystem-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.subsystem-content p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.subsystem-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tag {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f0f0f0;
  color: #555;
  border-radius: 4px;
  font-size: 14px;
}

.cases-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-item {
  display: flex;
  gap: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.case-image {
  flex: 0 0 40%;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-content {
  flex: 1;
  padding: 30px 30px 30px 0;
  position: relative;
}

.case-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.case-content p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.read-more {
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  bottom: 30px;
  right: 30px;
  transition: color 0.3s;
}

.read-more:hover {
  color: var(--secondary-color);
}

@media (max-width: 992px) {
  .solution-intro {
    flex-direction: column;
  }
  
  .features-container {
    grid-template-columns: 1fr;
  }
  
  .subsystem-item,
  .case-item {
    flex-direction: column;
  }
  
  .subsystem-image,
  .case-image {
    height: 200px;
  }
  
  .subsystem-content,
  .case-content {
    padding: 25px;
  }
}
</style> 